<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>轮播图和列表框</title>
    <style>
       body {
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}

.slider-container {
  width: 80%;
  margin: 50px auto;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.list-container {
  width: 80%;
  margin: 50px auto;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

h1 {
  text-align: center;
  margin-top: 0;
}

.slider {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: auto;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 768px) {
  .slider-container,
  .list-container {
    width: 90%;
  }
}
*{
    padding: 0;
    margin: 0;
}
html{
    font-size: 62.5%;
}
body{
    display:flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */

}
img{
    background-color: #666;
    height: 20rem;
    width: 10rem;
    margin: 1rem;
    border-radius: 20rem;
    --expand-width:60rem;
    --shrink-width:10rem;
    --expand-radius:3.6rem;
    --shrink-radius:20rem;    
}
a:nth-child(1) img{
    animation:swiper 30s infinite
}
a:nth-child(2) img{
    animation:swiper 30s 6s infinite
}
a:nth-child(3) img{
    animation:swiper 30s 12s infinite
}
a:nth-child(4) img{
    animation:swiper 30s  18s infinite
}
a:nth-child(5) img{
    animation:swiper 30s  24s infinite
}
@keyframes swiper {
    0%{
        width: var(--shrink-width);
        border-radius:var(--shrink-radius);

    }
    1%{
        width: var(--expand-width);
        border-radius:var(--expand-radius);
        
    }
    20%{
        width: var(--expand-width);
        border-radius:var(--expand-radius);
        
    }
    21%{
        width: var(--shrink-width);
        border-radius:var(--shrink-radius);
        
    }
    100%{
        width: var(--shrink-width); 
        border-radius:var(--shrink-radius);
        
    }
}
div{
    width: 100;
    height: 100px;
}

 
    </style>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="slider-container">
      <h1>轮播图</h1>
      <div class="slider">
        <img src="img/smar1.webp" alt="图片1">
        <img src="img/smar1.webp" alt="图片2">
        <img src="image3.jpg" alt="图片3">
      </div>
    </div>
    <div class="list-container">
      <h1>列表框</h1>
      <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
      </ul>
    </div>
  </body>
</html>
